<!DOCTYPE html>
<html lang="{{ locale }}" {{  isDirectionRTL ? 'dir="rtl"' : ""}} style="min-height: 100%;">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        {{ pageHead }}
        <noscript>
            {% apply minifyStylesheetContents %}
            <style>
                body .page {
                    max-height: initial;
                    height: initial;
                }
            </style>
            {% endapply %}
        </noscript>

        <style>
            {% apply minifyStylesheetContents %}
            body {
                background: {{ "#{theme.variable('global.body.backgroundImage.color', theme.variable('global.options.preset', 'light') == 'light' ? '#fff' : '#272A2D')}" }};
                font-size: {{ "#{theme.variable('global.fonts.size.medium', 14)}px" }};
                color: {{ "#{theme.variable('global.mainColors.fg', theme.variable('global.options.preset', 'light') == 'light' ? '#555a62' : '#f5f6f7')}" }};
                word-break: break-word;
            }

            h1, h2, h3, h4, h5, h6 {
                line-height: {{ theme.variable('global.lineHeight.condensed', 1.25) }};
                color: {{ "#{theme.variable('global.mainColors.fgHeading', theme.variable('global.mainColors.fgHeading', theme.variable('global.mainColors.fg', theme.variable('global.options.preset', 'light') == 'light' ? '#555a62' : '#f5f6f7')))}" }};
            }

            .page {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                overflow: visible;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                width: 100%;
                min-height: 100vh;
                position: relative;
                z-index: 0;
            }

            .page-minHeight {
                -webkit-box-flex: 1;
                -webkit-flex-grow: 1;
                -ms-flex-positive: 1;
                flex-grow: 1;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                min-height: 100vh;
            }
            {% endapply %}
        </style>

        {%- if themeFooter -%}
            <style>
                {% apply minifyStylesheetContents %}
                body.isLoading .page-minHeight {
                    min-height: 200vh;
                }
                body.isLoading #themeFooter {
                    display: none;
                }
                {% endapply %}
            </style>

            <noscript>
                <style>
                    {% apply minifyStylesheetContents %}
                    body.isLoading .page-minHeight {
                        min-height: initial;
                    }

                    body.isLoading #themeFooter {
                        display: initial;
                    }
                    {% endapply %}
                </style>
            </noscript>
        {%- endif -%}


        <style>
            {% apply minifyStylesheetContents %}
            body.isLoading #titleBar {
                background: {{ theme.variable("titleBar.colors.bg", "#037DBC") }};
                height: {{ theme.pixelVariable('titleBar.sizing.height', 48) }}px;
            }
            @media (max-width: {{ theme.pixelVariable("titlebar.breakpoints.compact", 800) }}px) {
                body.isLoading #titleBar {
                    height: {{ "#{theme.pixelVariable('titleBar.sizing.mobile.height', 44)}px" }}
                }
            }
            body.isLoading .Frame {
                /* For the legacy Gdn_Controller FOUC */
                visibility: hidden;
            }
            {% endapply %}
        </style>
        <noscript>
            <style>
                {% apply minifyStylesheetContents %}
                body.isLoading .Frame {
                    /* For the legacy Gdn_Controller FOUC */
                    visibility: visible;
                }
                {% endapply %}
            </style>
        </noscript>
    </head>

    <body class="{{ cssClasses }}" style="margin: 0;">
        {{- iconDefinitions -}}
        <div id="page" class="page">
            <div class="page-minHeight">
                {%- if themeHeader -%}
                    <div id="themeHeader">
                        <template shadowrootmode="open">{{ themeHeader }}</template>
                    </div>
                {%- endif -%}
                {%- if bodyContent|default(false) -%}
                {# Legacy Gdn_Controller layout (forum, admin) #}
                    <header id="titleBar" class="react-title-bar" data-react="title-bar-hamburger"></header>
                    {{ bodyContent }}
                {%- else -%}
                {# Modern Vanilla\Web\Page layout (layouts, admin-new, knowledge, forum w/ isReactView) #}
                    <div id="titleBar"></div>
                    <div id="app">
                        {% if breadcrumbs|default(false) %}
                            <noscript>
                                <div class="breadcrumbs">
                                {% for breadcrumb in breadcrumbs %}
                                    <span class="crumb">
                                        <a href="{{ breadcrumb.getUrl() }}">{{ breadcrumb.getName() }}</a>
                                    </span>
                                {% endfor %}
                                </div>
                            </noscript>
                        {% endif %}
                        {%- if seoContent|default(false) -%}
                            {% if useNoScript|default(false) %}
                                {#  Used by Vanilla\Web\Page #}
                                <noscript id="fallbackPageContent">
                                    {{- seoContent|raw -}}
                                </noscript>
                            {% else %}
                                {#  Used by Gdn_Controller with isReactView #}
                                <div id="fallbackPageContent">
                                    {{- seoContent|raw -}}
                                </div>
                            {% endif %}
                        {%- endif -%}
                    </div>
                {%- endif -%}
            </div>
            {%- if isDistMissing|default(false) -%}
                <style>
                    .distMissing {
                        display: flex;
                        position: fixed;
                        top: 24px;
                        left: 24px;
                        right: 24px;
                        bottom: 24px;
                        align-items: center;
                        justify-content: center;
                        min-height: 80vh;
                    }
                </style>
                <div class="distMissing">
                    <div>
                        <h1>Frontend Build Assets are missing</h1>
                        <p>Did you forget to build vanilla?</p>
                        <pre><code>vnla build</code></pre>
                    </div>
                </div>
            {% endif %}
            {%- if themeFooter -%}
                <div id="themeFooter">
                    <template shadowrootmode="open">{{ themeFooter }}</template>
                </div>
            {%- endif -%}
        </div>
        <div id="modals"></div>
    </body>
</html>
